<template>
  <div class="login-container">
    <el-main>
      <el-card class="login-module">
        <div slot="header" class="clearfix">
          <span style="text-align: center; font-size: 30px; font-family: 'Microsoft YaHei'">
            <p><img src='../../assets/images/jiaoda.jpg' alt="My Image"
                    style="margin-right: 18px; height: 50px; width:50px;vertical-align: text-top "/>"hello"</p>
          </span>
        </div>
        <div>
          <el-form :model="user" :rules="rules" ref="user" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户账号" prop="account">
              <el-input v-model="user.account" placeholder="请输入账号" prefix-icon="el-icon-lollipop"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="passwd">
              <el-input v-model="user.passwd" placeholder="请输入密码" show-password
                        prefix-icon="el-icon-ice-cream-round"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('user')">登陆</el-button>
              <el-button @click="resetForm('user')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'login',
  data () {
    return {
      loginAttempts: 0,
      isLocked: false,
      user: {
        id: '',
        account: '',
        age: '',
        name: '',
        passwd: '',
        phone: '',
        email: '',
        role: '',
        city: '',
        province: '',
        school_id: '',
        school_name: ''
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {pattern: /^[a-zA-Z0-9]+$/, message: '账号只包含字母或数字', trigger: 'blur'},
          {min: 6, max: 18, message: '长度在6-18之间', trigger: 'blur'}
        ],
        passwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {pattern: /^[a-zA-Z0-9]+$/, message: '密码只包含字母或数字', trigger: 'blur'},
          {min: 6, max: 18, message: '长度在3-18之间', trigger: 'blur'}
        ]
      }
    }
  },

  methods: {
    submitForm (formName) {
      if (this.isLocked) {
        this.$message({
          showClose: true,
          message: '登录已被锁定，请稍后再试。',
          type: 'error'
        })
        return
      }

      axios.post('/api/login/login?account=' + this.user.account + '&passwd=' + this.user.passwd)
        .then(res => {
          console.log(res)
          if (res.data.msg === '登录成功') {
            this.loginAttempts = 0 // 成功登录后重置尝试次数
            this.$router.push({name: 'animation'})
          } else {
            this.loginAttempts++
            if (this.loginAttempts >= 5) {
              this.isLocked = true
              setTimeout(() => {
                this.isLocked = false
                this.loginAttempts = 0 // 锁定期结束后重置尝试次数
              }, 300000) // 5分钟的毫秒数
            }

            if (res.data.msg === '没有找到用户') {
              this.handleError('没有找到用户')
            } else {
              this.handleError('密码错误')
            }
          }
        })
    },
    handleError (errorMessage) {
      this.$message({
        showClose: true,
        message: errorMessage,
        type: 'error'
      })
      this.user.account = ''
      this.user.passwd = ''
    },
    // submitForm (formName) {
    //   axios.post('/api/login/login?account=' + this.user.account + '&passwd=' + this.user.passwd)
    //     .then(res => {
    //       console.log(res)
    //       if (res.data.msg === '登录成功') {
    //         this.$router.push('/index')
    //       } else if (res.data.msg === '没有找到用户') {
    //         this.$message({
    //           showClose: true,
    //           message: '没有找到用户',
    //           type: 'error'
    //         })
    //         this.user.account = ''
    //         this.user.passwd = ''
    //       } else {
    //         this.$message({
    //           showClose: true,
    //           message: '密码错误',
    //           type: 'error'
    //         })
    //         this.user.account = ''
    //         this.user.passwd = ''
    //       }
    //     }
    //     )
    // },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    goToRegisterPage () {
      this.$router.push('/register')// 假设你的注册页面路由是 '/register'
    }
  }

}

</script>

<style scoped>
.login-module {
  position: absolute;
  right: 490px;
  /*把距离右边的距离调整为400px，使模块更靠中间 */
  text-align: center;
  width: 35%;
  /*把宽度给增加一些，增加到35%*/
  margin-top: 120px;
  /*给顶部外边距增加一些，到70px*/
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
  /*给出一个更明显的阴影效果*/
  background-color: #fff;
  /*设置背景色为白色*/
  padding: 20px;
  /*设置内边距为20px，增加内部空间*/
  border-radius: 10px;
  /*设置边框圆角为10px，使边角光滑*/
}

.el-header {
  background-color: #0e5dc4;
  color: #6ee66a;
  line-height: 60px;
}

.login-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url('../../../../template-web/src/assets/bg2.svg');
  background-size: 100%;
  overflow: hidden;
}

.login-page {
  border-radius: 50px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #f9f9f9;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>
